<template>
    <!-- 导航栏 -->
    <van-nav-bar
        :title="TypeName"
        left-text="返回"
        left-arrow
        fixed
        placeholder
        z-index="1000"
        @click-left="OnBack"
        @click-right="SearchShow = true"
    >
        <template #right>
            <van-icon name="search" size="20" />
        </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-sticky :offset-top="46">
        <van-dropdown-menu>
            <van-dropdown-item @change="OnTypeToggle" v-model="TypeActive" :options="TypeList" />
            <van-dropdown-item @change="OnFlagToggle" v-model="FlagActive" :options="FlagList" />
            <van-dropdown-item @change="OnSortToggle" v-model="SortActive" :options="SortList" />
            <van-dropdown-item @change="OnByToggle" v-model="ByActive" :options="ByList" />
        </van-dropdown-menu>
    </van-sticky>

    <!-- 搜索框 -->
    <van-popup v-model:show="SearchShow" position="top">
        <van-search v-model="keywords" placeholder="请输入关键词" @search="OnSearch" />
    </van-popup>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="list">
                <div class="item" v-for="item in list" :key="item.id">
                    <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                        <div class="thumb">
                            <van-image
                                width="100%"
                                height="150px"
                                fit="cover"
                                :src="item.thumb_text"
                            />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="box">
                            <div class="price">
                                <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                                <span :class="item.live_price ? 'product_price' : ''">￥{{ item.price }}</span>
                            </div>
                            <div class="buy-count">{{ item.buy_count }}人付款</div>
                        </div>
                        <div class="box">
                            <div class="region">{{ item.region_text }}</div>
                            <div class="chat"><van-icon name="chat-o" color="#ff5000" size="16" /></div>
                        </div>

                    </router-link>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
    <van-back-top />

</template>

<script setup>

const { proxy } = getCurrentInstance();

// 商品分类
const TypeList = reactive([
    {text: '全部分类', value: 'all'},
]);

// 商品标签
const FlagList = [
    {text: '全部商品', value: '0'},
    {text: '新品', value: '1'},
    {text: '热销', value: '2'},
    {text: '推荐', value: '3'},
];

// 排序
const SortList = [
    {text: '按上架时间', value: 'createtime'},
    {text: '按价格', value: 'price'},
    {text: '按库存', value: 'stock'}
];

// 排序顺序
const ByList = [
    {text: '降序', value: 'desc'},
    {text: '升序', value: 'asc'},
];

const TypeActive = ref(proxy.$route.query.typeid ?? 'all');
const FlagActive = ref('0'); // 标签 1-新品 2-热销 3-推荐
const SortActive = ref('createtime'); // 排序 上架时间 价格 库存
const ByActive = ref('desc');  // desc 降序 asc 升序
const SearchShow = ref(false); // 搜索框的显示
const keywords = ref(''); // 搜索关键词
const TypeName = ref('全部分类'); // 标题栏上面的分类名称

const list = ref([]); // 数据列表
const page = ref(1);  // 分页
const loading = ref(false); // 加载状态
const finished = ref(false); // 是否无更多数据
const refreshing = ref(false); // 下拉刷新

onBeforeMount(() =>
{
    GetTypeData();
});

const OnRefresh = () =>
{
    list.value = [];
    page.value = 1;
    loading.value = true;
    finished.value = false;
    refreshing.value = true;

    setTimeout(OnLoad,1500);
}

const OnLoad = async () =>
{
    if(refreshing.value === true)
    {
        refreshing.value = false;
    }

    const params = {
        typeid: TypeActive.value,
        flag: FlagActive.value,
        sort: SortActive.value,
        by: ByActive.value,
        keywords: keywords.value,
        page:page.value
    }

    const result = await proxy.$http.post('/product/index',params);

    loading.value = false;

    if(result.code === 1)
    {
        let count = result.data.count;
        list.value = list.value.concat(result.data.list);

        if(list.value.length >= count)
        {
            finished.value = true;

            return false;
        }

        page.value += 1;
    }else{
        finished.value = true;

        proxy.$fail(result.msg);
    }
}

// 搜索事件
const OnSearch = () => 
{
    SearchShow.value = false;
    // 触发刷新效果
    OnRefresh();
}

// 分类切换
const OnTypeToggle = () =>
{
    GetTypeName();

    OnRefresh();
}

// 属性切换
const OnFlagToggle = () =>
{
    OnRefresh();
}

// 排序切换
const OnSortToggle = () =>
{
    OnRefresh();
}

// 升降序切换
const OnByToggle = () =>
{
    OnRefresh();
}

// 获取分类名称
const GetTypeName = () =>
{
    // 循环获取选中的分类名称
    TypeList.map(item =>
    {
        // 根据切换的分类id判断是否哪个分类
        if(TypeActive.value == item.value)
        {
            TypeName.value = item.text;
        }
    });
}

const GetTypeData = async () =>
{
    const result = await proxy.$http.post('/product/type');

    if(result.code === 1)
    {
        for(let item of result.data)
        {
            TypeList.push({
                text:item.name,
                value:item.id
            });
        }
    }
}

const OnBack = () => proxy.$router.back();
</script>

<style scoped>
@import url('/assets/css/ProductIndex.css');
</style>